<template>
    <div>
        <el-dialog v-model="props.BatchVisible" title="批量改价 " @close="handleBatchClose" width="30%">
            <el-form :model="batchForm" label-width="auto" label-position="left" ref="batchRef" :rules="publicRules">
                <el-form-item label="商品分类" prop="categoryIds">
                    <el-tree-select v-model="batchForm.categoryIds" :data="productSortList"
                        :props="{ value: 'id', label: 'name', children: 'children' }" value-key="id"
                        placeholder="不选择则为全部" show-checkbox multiple :render-after-expand="false" clearable />
                </el-form-item>


                <el-form-item label="商品品牌" prop="brandIds">
                    <el-select v-model="batchForm.brandIds" placeholder="不选择则为全部" multiple clearable>
                        <el-option v-for="item in brandList" :key="item.id" :label="item.commonName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="修改方式" prop="editPriceType" required>
                    <el-select v-model="batchForm.editPriceType" @change="changeEditWay">
                        <el-option v-for="item in editWay" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="修改类型" prop="increased" required>
                    <el-radio-group v-model="batchForm.increased">
                        <el-radio v-for="item in editType" :key="item.value" :value="item.value">{{ item.label
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="销售价变更" prop="salePriceSpace" required>
                    <el-input type="number" v-model="batchForm.salePriceSpace">
                        <template #append v-if="priceUnit">{{ priceUnit }}</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="划线价变更" prop="originalPriceSpace" required>
                    <el-input type="number" v-model="batchForm.originalPriceSpace">
                        <template #append v-if="priceUnit">{{ priceUnit }}</template>
                    </el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="handleBatchSure"> 确定 </el-button>
                <el-button @click="handleBatchClose">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["handleBatchClose", "handleBatchSure"]);
const brandList = ref([])//品牌列表
const productSortList = ref([])//品牌列表
const priceUnit = ref('')//单位
const props = defineProps({
    BatchVisible: {
        type: Boolean,
        default: false,
    },
    websiteId: {
        type: [String, Number],
        default: "",
    },
    languageId: {
        type: [String, Number],
        default: "",
    }
})
const batchForm = ref({
    websiteId: Number(props.websiteId),
    categoryIds: [],//商品分类
    brandIds: [],//商品品牌
    editPriceType: 'Fixed',//编辑价格类型 EditPriceType Fixed固定值/Percent百分比
    increased: true,//价格是否上涨 true 上涨 false 下降
    salePriceSpace: 0,//销售价格范围
    originalPriceSpace: 0//划线价格范围
})
const queryParams = reactive({
    pageNum: 1,
    pageSize: 999,
    param: {
        websiteId: null,
        languageId: null,
        fatherId: 0,
    },
});
watch(
    () => props.BatchVisible,
    () => {
        if (!props.BatchVisible) return;
        getBasics()
    })
const handleBatchSure = () => {
    proxy.$refs["batchRef"].validate((valid) => {
        if (valid) {
            site.general.sitewebsitemoduleEditproductskulist(
                {
                    data: batchForm.value
                }
            ).then(res => {
                if (res.code === 200) {
                    proxy.$modal.msgSuccess(res.message);
                    priceUnit.value = ''
                    proxy.resetForm("batchRef");
                    emits('handleBatchSure')
                }
            })
        }
    })
}
onMounted(() => {
    getList();
})
const getList = () => {
    queryParams.param.websiteId = Number(props.websiteId);
    queryParams.param.languageId = Number(props.languageId);
    site.general
        .sitecategoryList({
            data: queryParams,
        })
        .then((res) => {//商品分类
            productSortList.value = res.data
        })
    site.general
        .sitewebsitebrandList({
            data: queryParams,
        })
        .then((res) => {//站点品牌关联表
            brandList.value = res.data;
        });
}
const getBasics = () => {
    site.general
        .sitewebsiteGetbyid({
            pathParams: {
                id: Number(props.websiteId),
            },
        })
        .then((res) => {//基础信息==》货币列表
            if (res.code === 200) {
                priceUnit.value = res.data.currency.description
            }
        })
}
const handleBatchClose = () => {
    priceUnit.value = ''
    proxy.resetForm("batchRef");
    emits('handleBatchClose')
}
const changeEditWay = (e) => {
    if (e === 'Percent') {
        priceUnit.value = '%'
    } else {
        getBasics()
    }
}
const editWay = reactive([{
    label: '固定值',
    value: 'Fixed'
}, {
    label: '百分比',
    value: 'Percent'
}]);
const editType = reactive([{
    label: '增加',
    value: true
}, {
    label: '减少',
    value: false
}]);
const publicRules = reactive({
    salePriceSpace: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        }, {
            pattern: /^(0|[1-9]\d*)(\.\d{0,2})?$/,
            message: "请正确输入",
            trigger: "blur",
        },
    ],
    originalPriceSpace: [
        {
            required: true,
            message: "请输入",
            trigger: "blur",
        },
        {
            pattern: /^(0|[1-9]\d*)(\.\d{0,2})?$/,
            message: "请正确输入",
            trigger: "blur",
        },
    ],
})
</script>